import { useStore } from "vuex"
export function useMain(appRef){
    const store=useStore()
    //根元素的原始宽高
   const baseWidth= 1920
   const baseHeight=1080
   //原始缩放比列
   const scale={
    width:1,
    height:1
   }
   const sum=1
   //改变缩放比列
    const calcRate=()=>{
        //如果宽小于高或者大于高的三倍 停止缩放
        if((window.innerWidth/window.innerHeight<1)||(window.innerWidth/window.innerHeight>3)){
            return
        }
        scale.width=((window.innerWidth+sum)/baseWidth).toFixed(5)
        scale.height=((window.innerHeight+sum)/baseHeight).toFixed(5)
        appRef.style.transform=`scale(${scale.width},${scale.height})`
        //保存缩放比列
        store.commit('SETSCALE',scale)
    }
    //监听窗口改变事件
    const resize=()=>{
        calcRate()
    }
    const windowDraw=()=>{
        window.addEventListener("resize",resize)
    }
    return {
        calcRate,windowDraw
    }
}